<template>
	<div>
		<van-nav-bar v-if="pageExists" :title="sname"></van-nav-bar>
		<div v-if="pageExists" style="padding: 3vw;height: 80vh;overflow-x: scroll;" ref="scrollBlock">
			<div v-for="(bubble, key) in messageList" :key="key">
				<van-row v-if="bubble.inLeft">
					<van-col span="24">
						<div style="width: 100%;display: inline;" v-if="pageExists">
							<table>
								<tr>
									<td>
										<van-image style="margin: 1vw;" width="10vw" height="10vw" fit="cover"
											:src="bubble.headImgSrc" round lazy-load />
									</td>
									<td>
										<el-card
											body-style="padding-left:15px;padding-right:15px;padding-top:10px;padding-bottom:10px;word-break:break-all;"
											shadow="always">
											<span>
												{{bubble.context}}
											</span>
										</el-card>
									</td>
								</tr>
							</table>
						</div>
					</van-col>
				</van-row>
				<van-row v-if="!bubble.inLeft">
					<van-col span="24">
						<div style="width: 100%;display: inline;text-align: right;" v-if="pageExists">
							<div style="width: 100%;text-align: right;">
								<table style="display: inline-block;">
									<tr>
										<td>
											<div>
												<el-card
													body-style="padding-left:15px;padding-right:15px;padding-top:10px;padding-bottom:10px;word-break:break-all;"
													shadow="always">
													<span>
														<div style="text-align: left">
															{{bubble.context}}
														</div>
													</span>
												</el-card>
											</div>

										</td>
										<td>
											<van-image style="margin: 1vw;" width="10vw" height="10vw" fit="cover"
												:src="bubble.headImgSrc" round lazy-load />
										</td>
									</tr>
								</table>
							</div>

						</div>
					</van-col>
				</van-row>
			</div>


		</div>


		<van-action-bar
			style="padding-left: 3vw;padding-right: 3vw;padding-top: 1vw;padding-bottom:1vw;overflow: hidden;z-index: 2100;">
			<van-field v-model="inputText" @keydown.enter="sendMessage" />
			<div style="width: 7rem;">
				<van-action-bar-button type="primary" text="发送" @click="sendMessage" />
			</div>

		</van-action-bar>
	</div>
</template>

<script>
	import {
		showNotify
	} from 'vant';
	import url from '@/assets/url.json';


	export default {
		props: {
			suid: String
		},

		mounted() {
			// this.showPage();
			this.conncetWebsocket();
		},

		data() {
			return {
				bubbleShow: false,
				pageExists: false,
				messageList: [],
				userName: '用户名',
				ws: null,
				uid: '',
				suid: '',
				sname: '',
				inputText: '',
				suserHeadImg: '',
				guserHeadImg: ''
			}
		},

		methods: {
			showPage() {
				this.pageExists = true;
				setTimeout(this.showData, 300);
			},
			showData() {
				this.bubbleShow = true;
				this.scrollToBottom();
			},
			conncetWebsocket() {
				let ws = new WebSocket(url.wsIp + '/api-webSocket/chatSocket' + '?' + 'token=' + this.$cookies.get(
					'token'));
				ws.onopen = () => {
					console.log("打开成功");
				}
				ws.onmessage = (strMsg) => {
					let msg = JSON.parse(strMsg.data);
					console.log(msg);
					switch (msg.event) {
						case "连接成功":
							console.log('连接成功');
							break;
						case 'smessage':
							console.log('发送成功');
							console.log(msg)
							this.messageList.push({
								inLeft: false,
								headImgSrc: this.suserHeadImg,
								context: msg.data.content,
							})
							this.scrollToBottom();
							break;
						case 'gmessage':
							console.log('获得消息');
							console.log(msg.data);
							this.messageList.push({
								inLeft: true,
								headImgSrc: this.guserHeadImg,
								context: msg.data.content,
							})
							this.scrollToBottom();
							break;

					}
				}
				ws.onclose = (e) => {
					console.log(e);
				}
				ws.onerror = (e) => {
					console.log(e);
				}
				this.ws = ws;
			},
			getData(uid, suid, name) {
				this.messageList = [];
				this.uid = uid;
				this.suid = suid;
				this.sname = name;
				this.userName = name;
				this.$axios({
					url: url.ip + '/api-user' + '/chat/getRecords',
					method: 'GET',
					params: {
						uid: uid,
						guid: suid
					},
					headers: {
						token: this.$cookies.get('token')
					}
				}).then((res) => {
					if (res.data.code !== 0) {
						console.log(res);
						showNotify({
							type: 'danger',
							message: res.data.message
						});
					} else {
						this.pageExists = true;
						// this.bubbleShow = true;
						let recordList = res.data.data;
						for (let key in recordList) {
							let record = recordList[key];
							let th = url.ip + '/' + record.suser.headImgSrc;
							if (record.suid === this.uid) {
								this.suserHeadImg = th;
								this.messageList.push({
									inLeft: false,
									headImgSrc: th,
									context: record.content,
								});
							} else {
								this.guserHeadImg = th;
								this.messageList.push({
									inLeft: true,
									headImgSrc: th,
									context: record.content,
								});
							}
						}
						setTimeout(this.showData, 300);
					}
				}).catch((err) => {
					console.log(err);
					showNotify({
						type: 'danger',
						message: "网络错误或用户未登录"
					});
				})
			},
			falshData() {
				this.getData(this.uid, this.suid, this.sname);
			},
			beforePageClose() {
				console.log('before close已触发');
				this.bubbleShow = false;
				// this.pageExists = false;
			},
			sendMessage() {
				console.log({
					'guid': this.suid,
					'type': 'text',
					'data': this.inputText
				});
				this.ws.send(JSON.stringify({
					'guid': this.suid,
					'type': 'text',
					'data': this.inputText
				}));
				this.inputText = '';
			},
			scrollToBottom() {
				this.$nextTick(() => {
					let scrollEl = this.$refs.scrollBlock;
					scrollEl.scrollTo({
						top: scrollEl.scrollHeight,
						behavior: 'smooth'
					});
				});
			}
		}
	};
</script>

<style>
	.van-cell__value {
		text-align: left;
	}
</style>